<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>Solutoire.com: Plotr - Custom Colorscheme Example</title>
		<link type="text/css" rel="stylesheet" href="assets/style.css" />
		<script src="../lib/prototype/prototype.js" type="text/javascript"></script>
		<script src="../lib/excanvas/excanvas.js" type="text/javascript"></script>
		<script src="../plotr.js" type="text/javascript"></script>
	</head>
	<body>
		<div><canvas id="plotr1" height="500" width="600"></canvas></div>
		
		<script type="text/javascript">			
			// Define datasets.
			var data_obj1 = {
				'd1': [[0, 1], [1, 1], [2, 1.414], [3, 1.73]],
				'd2': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73]],
				'd3': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2]],
				'd4': [[0, 0.86], [1, 0.83], [2, 3], [3, 1.73]]
			};
			
			// Define more datasets, overriding some sets defined
			// in the first data object.
			var data_obj2 = {
				'd1': [[0, 1], [1, 1]],
				'd5': [[0, 1], [1, 1]]
			};
			
			// Define a custom colorscheme, assigning different colors
			// to each defined dataset.
			var customScheme = new Hash({
				'd1': '#00A800',
				'd2': '#F07800',
				'd3': '#F00000',
				'd4': '#900060',
				'd5': '#000000'
			});
			
			// Define some options.
			var options = {
				// Use the predefined blue colorscheme.
				colorScheme: customScheme,
				// Render a horizontal oriented barchart.
				barOrientation: 'vertical',				
				// Define a padding for the canvas node
				padding: {
					left: 30, 
					right: 0, 
					top: 10, 
					bottom: 30
				},
				background: {
					color: '#f2f2f2'
				},				
				axis: {
					// The fontcolor of the labels is black.
					labelColor: '#000000',
					// Add the ticks. Keep in mind, x and y axis are swapped
					// when the BarOrientation is horizontal.
					x: {
						ticks: [
							{v:0, label:'day 1'}, 
					      	{v:1, label:'day 2'}, 
					      	{v:2, label:'day 3'},
					      	{v:3, label:'day 4'}
						]
					}	
				},
				// Shift the legend to the right.
				legend: {
					position:{
						left: '420px'	
					}	
				}				
			};
									
			// Instantiate a new BarCart.
			var chart = new Plotr.BarChart('plotr1',options);
			
			// Add the two datasets.
			chart.addDataset(data_obj1);
			chart.addDataset(data_obj2);
			
			// Render the barchart.
			chart.render();		
		</script>
	</body>	
</html>
